<template>
  <!-- tab基本信息表单  -->
  <el-scrollbar style="height: 100%">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px" class="form-input-m" inline-message>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="WHONET编码" prop="whoCode">
            <el-input v-model="formData.whoCode" placeholder="请输入编码" clearable> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="助记符" prop="inputCode">
            <el-input v-model="formData.inputCode" placeholder="请输入助记符" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="微生物编码" prop="germNo">
            <el-input v-model="formData.germNo" placeholder="请输入微生物编码" clearable> </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="英文编码" prop="englishCode">
            <el-input v-model="formData.englishCode" type="text" placeholder="请输入英文编码" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="微生物名称" prop="germNa">
            <el-input v-model="formData.germNa" placeholder="请输入微生物名称" @change="autoInputCode" clearable> </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="英文名称" prop="englishName">
            <el-input v-model="formData.englishName" type="text" placeholder="请输入英文名称" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否常见" prop="isCommon">
            <el-switch v-model="formData.isCommon" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="标准名称" prop="standardNa">
            <el-input v-model="formData.standardNa" type="text" placeholder="请输入标准名称" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否厌氧菌" prop="isAnaerobe">
            <el-switch v-model="formData.isAnaerobe" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="界" prop="orgKingdom">
            <SelectDataList ref="orgKingdomRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击界编码'" :searchParam="{ code: 'orgKingdom' }" @selectDataRow="(row)=>dictSelectConfirm('orgKingdom',row)" @clearValue="dictSelectClear('orgKingdom')" v-model="formData.orgKingdom" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 门、纲 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="门" prop="phylumCode">
            <SelectDataList ref="phylumCodeRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击门编码'" :searchParam="{ code: 'phylumCode' }" @selectDataRow="(row)=>dictSelectConfirm('phylumCode',row)" @clearValue="dictSelectClear('phylumCode')" v-model="formData.phylumCode" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="纲" prop="orgClass">
            <SelectDataList ref="orgClassRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击纲编码'" :searchParam="{ code: 'orgClass' }" @selectDataRow="(row)=>dictSelectConfirm('orgClass',row)" @clearValue="dictSelectClear('orgClass')" v-model="formData.orgClass" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 目、科 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="目" prop="orgOrder">
            <SelectDataList ref="orgOrderRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击目编码'" :searchParam="{ code: 'orgOrder' }" @selectDataRow="(row)=>dictSelectConfirm('orgOrder',row)" @clearValue="dictSelectClear('orgOrder')" v-model="formData.orgOrder" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="科" prop="familyCode">
            <SelectDataList ref="familyCodeRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击科分组'" :searchParam="{ code: 'familyCode' }" @selectDataRow="(row)=>dictSelectConfirm('familyCode',row)" @clearValue="dictSelectClear('familyCode')" v-model="formData.familyCode" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 属、种 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="属" prop="genusGroup">
            <SelectDataList ref="genusGroupRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击属编码'" :searchParam="{ code: 'genusGroup' }" @selectDataRow="(row)=>dictSelectConfirm('genusGroup',row)" @clearValue="dictSelectClear('genusGroup')" v-model="formData.genusGroup" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="种" prop="speciesGroup">
            <SelectDataList ref="speciesGroupRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击种分组'" :searchParam="{ code: 'speciesGroup' }" @selectDataRow="(row)=>dictSelectConfirm('speciesGroup',row)" @clearValue="dictSelectClear('speciesGroup')" v-model="formData.speciesGroup" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <!-- <el-col :span="12">
          <el-form-item label="是否厌氧菌" prop="isAnaerobe">
            <el-switch v-model="formData.isAnaerobe" inline-prompt active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="12">
          <el-form-item label="种分组" prop="speciesGroup">
            <SelectDataList ref="employeeSelectRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击种分组'" :searchParam="{ code: 'speciesGroup' }" @selectDataRow="speciesGroupSelect" v-model="formData.speciesGroup" />
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="12">
          <el-form-item label="组织机构" prop="orgId">
            <el-input v-model="formData.orgId" type="text" placeholder="请输入组织机构" clearable> </el-input>
          </el-form-item>
        </el-col> -->
      </el-row>

      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="属编码" prop="genusCode">
            <SelectDataList ref="employeeSelectRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击属编码'" :searchParam="{ code: 'genusCode' }" @selectDataRow="genusCodeSelect" @clearValue="genusCodeClear" v-model="formData.genusCode" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="属分组" prop="genusGroup">
            <SelectDataList ref="employeeSelectRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击属分组'" :searchParam="{ code: 'genusGroup' }" @selectDataRow="genusGroupSelect" @clearValue="genusGroupClear" v-model="formData.genusGroup" />
          </el-form-item>
        </el-col>
      </el-row> -->

      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="科编码" prop="familyCode">
            <SelectDataList ref="employeeSelectRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击属分组'" :searchParam="{ code: 'familyCode' }" @selectDataRow="familyCodeSelect" @clearValue="familyCodeClear" v-model="formData.familyCode" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="门编码" prop="phylumCode">
            <el-input v-model="formData.phylumCode" type="text" placeholder="请输入门编码" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row> -->

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="微生物类型" prop="germType">
            <SelectDataList ref="employeeSelectRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击选择微生物类型'" :searchParam="{ code: 'germType' }" @selectDataRow="SelectRowClick" @clearValue="germTypeClear" v-model="formData.germType" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="血清型分组" prop="serumGroup">
            <SelectDataList style="width:100%" ref="employeeSelectRef" :url="'/api/sys/basDictDetail/findDictDetailList'" :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]" :placeholder="'点击选择血清型分组'" :searchParam="{ code: 'serumGroup' }" @selectDataRow="serumGroupSelect" @clearValue="serumGroupClear" v-model="formData.serumGroup" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="组织机构" prop="orgId">
            <el-input v-model="formData.orgId" type="text" placeholder="请输入组织机构" clearable> </el-input>
          </el-form-item>
        </el-col>
      </el-row> -->

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入备注" clearable type="textarea" style="width: 560px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="亚界" prop="subKingdomCode">
            <el-input v-model="formData.subKingdomCode" placeholder="请输入亚界" clearable type="textarea" style="width: 560px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item>
            <!-- <el-button type="text" class="button-blue" @click="openEditExtraProperties"
              >配置扩展属性</el-button
            > -->
            <el-button type="primary" @click="saveForm">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 配置扩展属性弹框 -->
    <EditExtraProperties ref="EditExtraPropertiesRef" />
  </el-scrollbar>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, watch, getCurrentInstance, PropType } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '../../utils/CommonMessage';
import { funBdsJsResult } from '../../utils/Expression'; //函数公式
import VxePulldownSelection from '../../components/VxePulldownSelection.vue'; //引用下拉框组件
import EditExtraProperties from '../../components/EditExtraProperties.vue'; //配置扩展属性弹框组件
import SelectDataList from '../../components/SelectDataList.vue';
// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

const formRef = ref(); //表单ref标记
// 表单绑定的数据类型限制
interface FormDataVO {
  id: string /*主键*/;
  whoCode: string /*微生物编码*/;
  germNo: string /*微生物代号*/;
  germNa: string /*微生物名称*/;
  englishCode: string /*微生物英文编码*/;
  englishName: string /*微生物英文名称*/;
  inputCode: string /*输入码*/;
  isCommon: boolean /*是否常见*/;
  standardNa: string /*标准名称*/;
  serumGroup: string /*血清型分组*/;
  speciesGroup: string /*种分组*/;
  genusCode: string /*属编号*/;
  genusGroup: string /*属分组*/;
  familyCode: string /*科编码*/;
  phylumCode: string /*门编码*/;
  isAnaerobe: boolean /*是否厌氧菌*/;
  germType: string /*微生物类型*/;
  remark: string /*备注*/;
  orgId: string /*组织机构id*/;
}
// 表单绑定的数据
let formData = reactive<FormDataVO>({
  id: '' /*主键*/,
  whoCode: '' /*微生物编码*/,
  germNo: '' /*微生物代号*/,
  germNa: '' /*微生物名称*/,
  englishCode: '' /*微生物英文编码*/,
  englishName: '' /*微生物英文名称*/,
  inputCode: '' /*输入码*/,
  isCommon: true /*是否常见*/,
  standardNa: '' /*标准名称*/,
  serumGroup: '' /*血清型分组*/,
  speciesGroup: '' /*种分组*/,
  genusCode: '' /*属编号*/,
  genusGroup: '' /*属分组*/,
  familyCode: '' /*科编码*/,
  phylumCode: '' /*门编码*/,
  isAnaerobe: false /*是否厌氧菌*/,
  germType: '' /*微生物类型*/,
  remark: '' /*备注*/,
  orgId: '', /*组织机构id*/
  orgKingdom: '',/**界 */
  orgClass: '',/** 纲*/
  orgOrder: '',/** 目*/
  subKingdomCode: '',/**结合ANAEROBE以及SUBKINGDOM_CODE进行判断 */
});

// 表单校验规则
const formRules = reactive<VxeFormPropTypes.Rules>({
  germNa: [{ required: true, message: '请输入名称' }],
  germNo: [{ required: true, message: '请输入代号' }]
});

const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref
// const collapseStatus = ref(false);

defineExpose({
  addNew,
  saveForm,
  clearFormData
});

// 父组件传值
let props = defineProps({
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
    // for (const key in nval) {
    //   if (Object.prototype.hasOwnProperty.call(nval, key)) {
    //     const element = nval[key];
    //     formData[key] = element;
    //   }
    // }
  },
  {
    deep: true,
    immediate: true
  }
);

// watch(
//   () => formData.name,
//   (n, o) => {
//     formData.ma = funBdsJsResult('firstPinYinFun', n);
//   },
//   { deep: true }
// );

// 方法定义区 =============
function addNew() {
  console.log('新增');

  clearFormData(); // 清空表单
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

// 自动生成助记符
function autoInputCode() {
  formData.inputCode = funBdsJsResult('firstPinYinFun', formData.germNa);
}

// 清空表单
function clearFormData() {
  formData.id = '';
  formData.whoCode = '';
  formData.germNo = '';
  formData.germNa = '';
  formData.englishCode = '';
  formData.englishName = '';
  formData.inputCode = '';
  formData.isCommon = true;
  formData.standardNa = '';
  formData.serumGroup = '';
  formData.speciesGroup = '';
  formData.genusCode = '';
  formData.genusGroup = '';
  formData.familyCode = '';
  formData.phylumCode = '';
  formData.isAnaerobe = false;
  formData.germType = '';
  formData.remark = '';
  formData.orgId = '';
  formData.orgKingdom = '';
  formData.orgClass = '';
  formData.orgOrder = '';
  formData.subKingdomCode = '';
}

// 保存分管类别
function saveForm(callback: any) {
  const el: any = proxy.$refs['formRef'];
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('校验表单失败', VxeNotifyType.error);
      return false;
    }
    let url = '';
    // 判断添加和编辑接口
    if (IsEmpty(formData.id)) {
      url = '/sta/germ/dict/addGermDict';
    } else {
      url = '/sta/germ/dict/updateGermDict';
    }
    proxy.$http
      .post(url, formData)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改微生物成功', VxeNotifyType.success);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增微生物成功', VxeNotifyType.success);
          }
          if (callback) {
            callback(true);
          }
        } else {
          if (!IsEmpty(formData.id)) {
            proxy.$emit('findList');
            VxeMessage('修改微生物失败', VxeNotifyType.error);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增微生物失败', VxeNotifyType.error);
          }
          if (callback) {
            callback(false);
          }
        }
      })
      .catch((err: any) => {
        // VxeMessage('保存分管类别异常', VxeNotifyType.error);
        // if (callback) {
        //   callback(false);
        // }
      });
  });
}

// 组件
//点击选择的那一项受检单位
function SelectRowClick(row) {
  console.log(row);
  //formData.germType = row.code;
  formData.germType = row.name;
}
function speciesGroupSelect(row) {
  formData.speciesGroup = row.name;
}
function speciesGroupClear() {
  formData.speciesGroup = '';
}

function serumGroupSelect(row) {
  formData.serumGroup = row.name;
}
function serumGroupClear() {
  formData.serumGroup = '';
}

function genusCodeSelect(row) {
  formData.genusCode = row.name;
}
function genusCodeClear() {
  formData.genusCode = '';
}

function genusGroupSelect(row) {
  formData.genusGroup = row.name;
}
function genusGroupClear() {
  formData.genusGroup = '';
}
function familyCodeSelect(row) {
  formData.familyCode = row.name;
}
function familyCodeClear() {
  formData.familyCode = '';
}

/**界、门、纲、目、科、属、种编号确认选择*/
function dictSelectConfirm(key, row) {
  formData[key] = row.name;
}
/**界、门、纲、目、科、属、种清空*/
function dictSelectClear(key) {
  formData[key] = '';
}
</script>

<style lang="scss" scoped>
// 中等尺寸时 配置扩展属性按钮
.el-button--default {
  padding: 5px 11px;
}

.el-tag {
  color: $base-white;
}
</style>
